<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">
<head>
    <title>Title</title>
</head>
<body>
<h2 style="text-align: center">用户列表</h2>
<div style="width: 60%; margin: 0px auto">
    <form id="formSearch">
        <input type="text" name="userName" placeholder="姓名">
        <input type="text" name="py" placeholder="拼音">
        <input type="button" value="查询" id="btnSearch">
        <input type="button" value="新增" id="btnAdd">
    </form>

</div>
<table align="center" cellpadding="0" cellspacing="0" width="60%" border="1">
    <thead>
    <tr>
        <th>用户名</th>
        <th>姓名</th>
        <th>出生日期</th>
        <th>拼音码</th>
        <th>可用标记</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>item.</td>
        <td>item.</td>
        <td>item.</td>
        <td>item.</td>
        <td>item.</td>
        <td><a href="javascript:upd(item.userID)">修改</a></td>
    </tr>
    </tbody>
</table>
<div style="width: 60%; margin: 0px auto">
    <span>
        <button id="btnPre">上一页</button>
        <button id="btnNext">下一页</button>
    </span>
    <span style="float: right">
            当前第 <span id="pageNum"></span> 页，
            总共 <span id="total"></span> 页
            <input type="text" id="inputNum" size="1">
            <button id="btnGo">go</button>
    </span>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script>

    $("#btnSearch").click(function () {
        var condition = $("#formSearch").serializeArray(); //name=1&minAge=2&maxAge=3
        init(1, 5, condition);
    });

    $("#btnAdd").click(function () {
        add();
    });

    $(function () {
        init();
    })


    function init(pageNum, pageSize, condition) {
        if (pageNum == undefined)
            pageNum = 1;
        if (pageSize == undefined)
            pageSize = 1;
        // var param="pageNum="+pageNum+"&pageSize="+pageSize;
        var obj = {};
        var param = "";


        if (condition) {
        console.log(condition)

            $(condition).each(function (index, item) {
                obj[item.name] = item.value
            });
            condition = $("#formSearch").serialize(); //name=1&minAge=2&maxAge=3

        }
        if (condition) {
            param = JSON.stringify(obj);
        } else {
            param = "";
        }
        console.log(condition)

        console.log(obj)
        console.log(param)

        $.ajax({
            url: '/list/' + pageNum + '/' + pageSize,          // 请求路径
            type: "get",                             // 请求方式
            data: condition,   // 请求参数
            dataType: "json",                        // 服务器返回的类型
            success: function (res) {                // 成功的回调函数
                if (res.success) {
                    $("tbody").empty();
                    // dom 转 jquery
                    var tr = "";
                    $(res.data.records).each(function (index, item) {
                        tr += "<tr><td>" + item.userId
                            + "</td><td>" + item.userName
                            + "</td><td>" + item.dataOfBirth
                            + "</td><td>" + item.py
                            + "</td><td>" + item.enabled
                            + "</td><td><a href='javascript:nab("
                            + item.userID
                            + ")'>启用</a>|<a href='javascript:upd("
                            + item.userID
                            + ")'>修改</a>|<a href='javascript:del("
                            + item.userID
                            + ")'>删除</a>"
                            + "</td></tr>";
                    });
                    $("tbody").append(tr);

                    // 当前页面
                    $("#pageNum").text(res.data.current)
                    // 总页面
                    $("#total").text(res.data.pages+1);

                    // 上下页按钮边缘值判断
                    if (res.data.isFirstPage) {
                        $("#btnPre").attr("disabled", "disabled");
                    } else {
                        $("#btnPre").removeAttr("disabled");
                    }
                    if (res.data.isLastPage) {
                        $("#btnNext").attr("disabled", "disabled");
                    } else {
                        $("#btnNext").removeAttr("disabled");
                    }
                } else {
                    alert(res.msg)
                }
            }
        });
    }

    function add() {
        sessionStorage.removeItem("id");
        window.location.href = "edit.html";
    }

    function upd(id) {
        sessionStorage.setItem("id", id);
        window.location.href = "edit.html";
    }

    function nab(id) {
            $.ajax({
                url: '',
                type: 'post',
                data: 'id=' + id,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        alert(res.msg);
                        init();
                    }
                }
            });
    }

    function del(id) {
        if (confirm('确认要删除吗?')) {
            $.ajax({
                url: '',
                type: 'delete',
                data: 'id=' + id,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        alert(res.msg);
                        init();
                    }
                }
            });
        }
    }

    // 上下页事件
    $("#btnPre").click(function () {
        var condition = $("#formSearch").serialize(); //name=1&minAge=2&maxAge=3
        var pageNum = parseInt($("#pageNum").text()) - 1;
        init(pageNum, 5, condition);
    });

    $("#btnNext").click(function () {
        var condition = $("#formSearch").serialize(); //name=1&minAge=2&maxAge=3
        var pageNum = parseInt($("#pageNum").text()) + 1;
        init(pageNum, 5, condition);
    });

    // go事件
    $("#btnGo").click(function () {
        var condition = $("#formSearch").serialize(); //name=1&minAge=2&maxAge=3
        var pageNum = $("#inputNum").val();
        init(pageNum, 5, condition);
    })

</script>
</body>
</html>
